<template>
	<jf-navigation background="#ffffff" @getHeight="getNavigationHeight">
		<view>{{ $t('index.news.navigation') }}</view>
	</jf-navigation>

	<view class="news_menu_fixed" :style="{ '--navigation-height': data.navigationHeight + 'rpx' }">
		<view class="news_menu">
			<view class="news_menu_item" v-for="(item, index) in data.menu" :key="index" @click="selMenu(index)">
				<image :src="data.currentIndex === index ? item.active : item.unActive" class="news_menu_item_icon">
				</image>
				<view class="news_menu_item_title">{{ $t(item.key) }}</view>
				<view class="news_menu_item_num" v-if="item.mun > 0">{{
          item.mun > 99 ? '99+' : item.mun
        }}</view>
			</view>
		</view>
	</view>

	<view class="news_menu_black"></view>

	<jf-falls :list="data.list" :loading="data.loading" :loadEnd="data.loadEnd" :loadError="data.loadError"
		:total="data.total" :column="1" :loadNoneText="$t('common.load.none')" :loadEndText="$t('common.load.notMore')"
		:loadErrorText="$t('common.load.error')" @load="getList()">
		<template #scope="{ item }" v-if="data.currentIndex === 0">
			<view class="news_star_item" @click="goArticle(item)">
				<image :src="item.userinfo.avatar || headerIcon" mode="aspectFill" class="news_star_header" @click.stop="navGo('/pages/index/user/user?id=' + item.userinfo.uid)"></image>
				<view class="news_star_content">
					<view>{{ item.userinfo.nickname }}</view>
					<view class="news_star_status" v-if="!item.data.cid">{{
            `${$t('index.news.likeInvitation')} ${DateTimeUtils.parseTime(
              item.add_time
            )}`
          }}</view>
					<view class="news_star_status" v-if="item.data.cid && !item.data.rid">{{
              `${$t('index.news.likeComment')} ${DateTimeUtils.parseTime(
                item.add_time
              )}`
            }}</view>
					<view class="news_star_status" v-if="item.data.cid && item.data.rid">{{
              `${$t('index.news.likeReply')} ${DateTimeUtils.parseTime(
                item.add_time
              )}`
            }}</view>
					<view class="news_star_remark">{{ item.data.content }}</view>
				</view>
				<image :src="item.article.cover_image" mode="aspectFill" class="news_star_cover"
					v-if="item.article && item.article.cover_image"></image>
			</view>
		</template>
		<template #scope="{ item }" v-if="data.currentIndex === 1">
			<view class="news_comment_item" @click="goArticle(item)">
				<image :src="item.userinfo.avatar || headerIcon" mode="aspectFill" class="news_comment_header"
					@click.stop="navGo('/pages/index/user/user?id=' + item.data.uid)"></image>
				<view class="news_comment_content">
					<view class="news_comment_name">{{ item.userinfo.nickname }}</view>
					<view class="news_comment_status" v-if="!item.data.cid">{{
            `${$t('index.news.commentInvitation')} ${DateTimeUtils.parseTime(
              item.add_time
            )}`
          }}</view>
					<view class="news_comment_status" v-if="item.data.cid && !item.data.rid">{{
              `${$t('index.news.replyComment')} ${DateTimeUtils.parseTime(
                item.add_time
              )}`
            }}</view>
					<view class="news_comment_status" v-if="item.data.cid && item.data.rid">{{
              `${$t('index.news.replyReply')} ${DateTimeUtils.parseTime(
                item.add_time
              )}`
            }}</view>
					<view class="news_comment_remark">{{ item.data.content }}</view>
					<view class="news_comment_invitation" v-if="!item.data.cid">
						<image :src="item.article.cover_image" mode="aspectFill"></image>
						<view class="news_comment_invitation_content">
							<view class="news_comment_invitation_title">{{
                item.article.title
              }}</view>
							<view class="news_comment_invitation_text">{{
                item.article.content
              }}</view>
						</view>
					</view>
					<view class="news_comment_reply" v-if="item.data.cid">
						<view class="news_comment_reply_text">{{
              !item.data.rid ? item.comment.content : item.replay.content
            }}</view>
					</view>
					<view class="news_comment_btns" v-if="data.currentIndex === 1">
						<view class="news_comment_btn" @click.stop="article.star(item.data, 2)">
							<image src="@/static/images/index/news/icon005.png"></image>
							<view class="">{{
                $t(
                  item.data.is_star === 1
                    ? 'index.news.commentBtnStar'
                    : 'index.news.commentBtnUnStar'
                )
              }}</view>
						</view>
						<view class="news_comment_btn" @click.stop="reply(item)">
							<image src="@/static/images/index/news/icon006.png"></image>
							<view class="">{{ $t('index.news.commentBtnReply') }}</view>
						</view>
					</view>
				</view>
			</view>
		</template>
		<template #scope="{ item }" v-if="data.currentIndex === 2">
			<view class="fans_item" @click="navGo('/pages/index/user/user?id=' + item.userinfo.uid)">
				<image :src="item.userinfo.avatar || headerIcon" mode="aspectFill" class="fans_header"></image>
				<view class="fans_content">
					<view class="fans_content_top">
						<view class="fans_name">{{ item.userinfo.nickname }}</view>
						<view class="fans_level">LV{{ item.userinfo.level }}</view>
					</view>
					<view class="fans_remark">{{ item.userinfo.mark }}</view>
				</view>
				<view class="fans_btn" :class="{ active: item.is_sub === 0 }" @click.stop="attentionUser(item)">
					{{$t(item.is_sub === 1? 'common.fans.cancelAttention': 'common.fans.attention')}}</view>
			</view>
		</template>


		<template #scope="{ item }" v-if="data.currentIndex === 3">
			<view class="news_inform_item">
				<view class="news_inform_time">{{DateTimeUtils.parseTime(item.add_time)}}</view>
				<view class="news_inform_content">
					<image :src="item.data.image" class="news_inform_img" mode="aspectFill"></image>
					<view class="news_inform_text">
						<view class="news_inform_title">{{item.data[data.locale + '_title']}}</view>
						<view class="news_inform_desc">{{item.data[data.locale + '_content']}}</view>
					</view>
				</view>
			</view>
		</template>
	</jf-falls>

	<Comment v-model="data.showComment" :type="data.commentType" :info="data.commentInfo" :article="article"></Comment>
</template>

<script lang="ts" setup>
	import { reactive, watch, onMounted , getCurrentInstance} from 'vue'
	import icon001 from '@/static/images/index/news/icon001.png'
	import icon002 from '@/static/images/index/news/icon002.png'
	import icon003 from '@/static/images/index/news/icon003.png'
	import icon004 from '@/static/images/index/news/icon004.png'
	import onIcon001 from '@/static/images/index/news/icon001_on.png'
	import onIcon002 from '@/static/images/index/news/icon002_on.png'
	import onIcon003 from '@/static/images/index/news/icon003_on.png'
	import onIcon004 from '@/static/images/index/news/icon004_on.png'
	import headerIcon from '@/static/images/common/header_icon.png'
	import Comment from '@/components/Comment'
	import { listNews, readNews } from '@/api/news'
	import { useStore } from '@/store/main'
	import DateTimeUtils from '@/static/utils/DateTimeUtils'
	import Methods from '../info/Methods'
	import Request from '@/static/network/request'

	import { attention } from "@/api/user"
    
	const article = new Methods()
	const store = useStore()
	const { proxy } = getCurrentInstance()
	const props = withDefaults(
		defineProps<{
			reachBottom : boolean
		}>(),
		{
			reachBottom: false,
		}
	)
	const emits = defineEmits<{
		(e : 'update:reachBottom', value : boolean) : void
	}>()
	const data = reactive({
		navigationHeight: 0,
		menu: [
			{
				unActive: icon001,
				active: onIcon001,
				key: 'index.news.menu1',
				mun: store.getNews.star_num,
			},
			{
				unActive: icon002,
				active: onIcon002,
				key: 'index.news.menu2',
				mun: store.getNews.comment_num,
			},
			{
				unActive: icon003,
				active: onIcon003,
				key: 'index.news.menu3',
				mun: store.getNews.fans_num,
			},
			{
				unActive: icon004,
				active: onIcon004,
				key: 'index.news.menu4',
				mun: store.getNews.sys_msg_num,
			},
		],
		currentIndex: 0,
		list: [],
		total: 0,
		loadEnd: false,
		loadError: false,
		loading: false,
		locale: uni.getLocale().replace('-', '_'),
		showComment: false,
		commentType: 2,
		commentInfo: null,
	})
	const queryParams = reactive({
		page: 1,
		limit: 10,
		type: 1,
	})

	const reply = (item : any) : void => {
		data.commentInfo = item.data
		data.commentType = item.data.cid ? 3 : 2
		data.showComment = true
	}



	const selMenu = (index : number) : void => {
		data.currentIndex = index
		queryParams.type = index + 1
		emits('update:reachBottom', false)
		getList(true)
	}
	const getNavigationHeight = (height : number) : void => {
		data.navigationHeight = height
	}
	const goArticle = (item : any) : void => {
		if (item.article.type === 1) {
			navGo('/pages/index/info/text/text?id=' + item.article.id)
		} else {
			navGo('/pages/index/info/video/video?id=' + item.article.id)
		}
	}
	const navGo = (url : string) : void => {
		uni.navigateTo({ url })
	}
	const getList = (init ?: boolean) : void => {
		if (init) {
			queryParams.page = 1
			data.total = 0
			data.list = []
			data.loadEnd = false
			data.loadError = false
			data.loading = false
		}
		if (data.loadEnd || data.loading) {
			emits('update:reachBottom', false)
			return
		}
		data.loading = true
		data.loadEnd = false
		data.loadError = false
		listNews(queryParams)
			.then((res : any) => {
				const ids = res.data.list
					.filter((item) => item.look === 0)
					.map((item) => item.id)
					.join(',')
				if (ids) {
					readNews({ ids, type: queryParams.type })
					Request.sendSocketMessage({
						data: JSON.stringify({ type: 'info' }),
					})
				}
				data.total = res.data.count
				data.list = data.list.concat(res.data.list)
				if (queryParams.page * queryParams.limit > data.total) {
					data.loadEnd = true
				}
				queryParams.page += 1
				emits('update:reachBottom', false)
			})
			.catch(() => {
				data.loadError = true
				emits('update:reachBottom', false)
			})
			.finally(() : void => {
				data.loading = false
			})
	}


	const attentionUser = (item : any) : void => {
		if (data.loading) return
		data.loading = true
		attention({
			user_id: item.uid,
			type: item.is_sub === 1 ? 0 : 1
		}).then(() : void => {
			uni.showToast({
				title: proxy.$t(item.is_sub === 1 ? 'index.info.unAttentionSuccess' : 'index.info.attentionSuccess'),
				icon: "none"
			})
			item.is_sub = item.is_sub === 1 ? 0 : 1
			store.setFans(item.uid, item.is_sub)
		}).catch(() => {
			uni.showToast({
				title: proxy.$t(item.is_sub === 1 ? 'index.info.unAttentionFail' : 'index.info.attentionFail'),
				icon: "none"
			})
		}).finally(() => {
			data.loading = false
		})
	}

	onMounted(() => {
		getList(true)
	})
	watch(
		() => props.reachBottom,
		(nVal : boolean) : void => {
			if (nVal) getList()
		},
		{
			deep: true,
		}
	)
</script>

<style lang="scss">
	.news_menu_fixed {
		--navigation-height: 0;
		z-index: 1;
		width: 100%;
		height: 220rpx;
		position: fixed;
		left: 0;
		top: var(--navigation-height);
		background: #ffffff;
	}

	.news_menu {
		width: 100%;
		height: 220rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 56rpx;
		border-bottom: 2rpx solid #f2f4f6;
		box-sizing: border-box;
		background: #ffffff;

		.news_menu_item {
			position: relative;
			width: 96rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.news_menu_item_icon {
				width: 96rpx;
				height: 96rpx;
				margin-bottom: 22rpx;
			}

			.news_menu_item_title {
				font-size: 26rpx;
				font-weight: 500;
				line-height: 36rpx;
			}

			.news_menu_item_num {
				position: absolute;
				right: 0;
				top: 0;
				transform: translate(50%, -50%);
				height: 32rpx;
				min-width: 32rpx;
				border-radius: 16rpx;
				border: 2rpx solid #ffffff;
				box-sizing: border-box;
				padding: 0 10rpx;
				text-align: center;
				font-size: 20rpx;
				line-height: 28rpx;
				background: #f83c1e;
				color: #ffffff;
				font-weight: 500;
			}
		}
	}

	.news_menu_black {
		width: 100%;
		height: 220rpx;
	}

	.news_star_item {
		display: flex;
		flex-direction: row;
		width: 686rpx;
		padding: 32rpx 0;
		border-bottom: 2rpx solid #e7eaee;

		.news_star_header {
			width: 80rpx;
			height: 80rpx;
			border-radius: 40rpx;
			flex-shrink: 0;
		}

		.news_star_content {
			flex-grow: 1;
			margin-left: 24rpx;

			view {
				&:nth-child(1) {
					font-size: 28rpx;
					line-height: 32rpx;
					font-weight: 400;
				}

				&:nth-child(2) {
					margin-top: 12rpx;
					font-size: 24rpx;
					line-height: 32rpx;
					font-weight: 400;
					color: #b2b9c6;
				}

				&:nth-child(3) {
					position: relative;
					padding-left: 16rpx;
					margin-top: 16rpx;
					font-size: 24rpx;
					line-height: 32rpx;
					font-weight: 400;
					color: #535a69;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;

					&::before {
						position: absolute;
						content: '';
						left: 0;
						top: 6rpx;
						width: 4rpx;
						height: 20rpx;
						background: #e7eaee;
					}
				}
			}
		}

		.news_star_cover {
			width: 96rpx;
			height: 96rpx;
			border-radius: 16rpx;
			flex-shrink: 0;
			margin-left: 32rpx;
		}

		&.less {
			align-items: center;
		}
	}

	.news_comment_item {
		width: 100%;
		padding: 32rpx 0;
		border-bottom: 2rpx solid #e7eaee;
		display: flex;
		flex-direction: row;
		box-sizing: border-box;

		.news_comment_header {
			width: 64rpx;
			height: 64rpx;
			border-radius: 32rpx;
			flex-shrink: 0;
		}

		.news_comment_content {
			width: 602rpx;
			margin-left: 20rpx;

			.news_comment_name {
				font-size: 24rpx;
				font-weight: 500;
				line-height: 32rpx;
			}

			.news_comment_status {
				margin-top: 4rpx;
				font-size: 20rpx;
				font-weight: 400;
				color: #b2b9c6;
				line-height: 28rpx;
			}

			.news_comment_remark {
				margin-top: 16rpx;
				font-size: 24rpx;
				font-weight: 400;
				line-height: 36rpx;
			}

			.news_comment_invitation {
				width: 100%;
				@include layout();
				background: #f6f8fa;
				border-radius: 16rpx;
				padding: 24rpx;
				margin-top: 24rpx;
				box-sizing: border-box;

				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 16rpx;
					flex-shrink: 0;
				}

				.news_comment_invitation_content {
					margin-left: 20rpx;
					flex-grow: 1;

					.news_comment_invitation_title {
						font-weight: 400;
						line-height: 32rpx;
						font-size: 24rpx;
						@include textOverflow(1);
					}

					.news_comment_invitation_text {
						margin-top: 4rpx;
						font-weight: 400;
						color: #535a69;
						line-height: 40rpx;
						font-size: 20rpx;
						@include textOverflow(1);
					}
				}
			}

			.news_comment_reply {
				width: 554rpx;
				background: #f6f8fa;
				border-radius: 16rpx;
				padding: 24rpx;
				margin-top: 24rpx;
				max-height: 80rpx;
				overflow: hidden;

				.news_comment_reply_text {
					width: 100%;
					font-weight: 400;
					color: #535a69;
					line-height: 40rpx;
					font-size: 24rpx;
					@include textOverflow(2);
				}
			}

			.news_comment_btns {
				@include layout();
				margin-top: 16rpx;

				.news_comment_btn {
					@include layout();
					padding: 0 16rpx;
					height: 56rpx;
					border-radius: 28rpx;
					background: #f2f4f6;
					font-weight: 400;
					color: #1f2937;
					line-height: 36rpx;
					font-size: 20rpx;
					margin-right: 24rpx;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 8rpx;
					}
				}
			}
		}
	}

	.news_inform_item {
		.news_inform_time {
			font-weight: 400;
			font-size: 24rpx;
			color: #b2b9c6;
			line-height: 32rpx;
			margin: 32rpx 0 24rpx 0;
			text-align: center;
		}

		.news_inform_content {
			width: 686rpx;
			background: #ffffff;
			border-radius: 16rpx;
			overflow: hidden;
			box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);

			.news_inform_img {
				width: 686rpx;
				height: 280rpx;
			}

			.news_inform_text {
				width: 100%;
				padding: 24rpx;
				box-sizing: border-box;

				.news_inform_title {
					font-weight: 500;
					font-size: 30rpx;
					line-height: 42rpx;
				}

				.news_inform_desc {
					font-size: 26rpx;
					font-weight: 400;
					color: #535a69;
					line-height: 40rpx;
					margin-top: 16rpx;
				}
			}
		}
	}

	.news_inform_black {
		width: 100%;
		height: 32rpx;
	}
</style>